<template>
	<view class="container">
		<view class="header">
			<view class="margin icon" @click="toUrl('/pages/notice/index')">
				<view class="iconfont icon-large blue">&#xe64c;</view>
			</view>
			<view class="margin user">
				<wd-img :width="60" :height="60" round
					src="../../static/myPage_png/touxiang.jpg" />
				<view class="content">
					<text style="font-weight: bold;">{{this.$store.state.userInfo.username}}</text>
					<text class="blue"
						style="background-color: rgba(210, 216, 238, 0.6);border-radius: 5px;padding: 2px;">山西瑞铭网络通信工程有限公司</text>
				</view>
			</view>
		</view>
		<view class="card">
			<wd-card title="智慧消防">
				“智慧消防”是利用物联网、人工智能、虚拟现实、移动互联网+等最新技术，配合大数据云计算平台、报警智能研判等专业应用，实现城市消防的智能化，提高信息传递的效率、保障消防设施的完好率。
				详情咨询热线：03496666688
				<template #footer>
					<wd-button style="color: var(--blue-color);" size="small" plain>查看详情</wd-button>
				</template>
			</wd-card>
		</view>
		<view class="content">
			<wd-cell-group border>
				<wd-cell is-link v-for="item in cellData" :key="item.id" @click="toUrl(item.toUrl)">
					<template #icon>
						<view class="cell-icon" v-html="item.icon" />
					</template>
					<template #title>
						<view>
							<view style="font-size: 20px">{{item.title}}</view>
						</view>
					</template>
				</wd-cell>
			</wd-cell-group>
		</view>
		<view>
			<button @click="loginOut" class="out-button">退出登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cellData: [{
					title: "账号信息",
					icon: "<view class='iconfont icon-small'>&#xe643;</view>",
					toUrl: '/pages/my/account'
				}, {
					title: "隐患管理",
					icon: "<view class='iconfont icon-small'>&#xe62c;</view>",
					toUrl: '/pages/warn/index'
				}, {
					title: "过期管理",
					icon: "<view class='iconfont icon-small'>&#xe6f1;</view>",
					toUrl: '/pages/my/expires'
				}, {
					title: "地址管理",
					icon: "<view class='iconfont icon-small'>&#xe63f;</view>",
					toUrl: '/pages/address/index'
				}, {
					title: "修改密码",
					icon: "<view class='iconfont icon-small'>&#xe611;</view>",
					toUrl: '/pages/my/passward'
				}, {
					title: "设备扫码",
					icon: "<view class='iconfont icon-small'>&#xe60d;</view>",
					toUrl: '/pages/scanCode/scanCode'
				}]
			}
		},
		mounted() {
		},
		methods: {
			toUrl(url) {
				if (url !== undefined) {
					if (url === "/pages/warn/index") {
						uni.switchTab({
							url: url,
						});
					} else {
						uni.navigateTo({
							url: url
						})
					}
				}
			},
			loginOut() {
				// 登出逻辑
				this.$store.commit("logout")
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 300px;
		/* 占满整个屏幕 */
		position: relative;
		background:
			linear-gradient(
				135deg,
				/* 斜着的渐变 */
				rgba(255, 183, 193, 1) 20%,
				/* 粉色 */
				rgba(248, 255, 169, 0.4) 40%,
				/* 黄色 */
				rgba(255, 152, 237, 0.4) 60%,
				/* 粉色 */
				rgba(255, 160, 168, 0.6) 80%,
				/* 半透明的粉色 */
				rgba(255, 139, 146, 0) 100%
				/* 完全透明的粉色 */
			);
		background-size: 130% 200%;
		/* 增大背景尺寸，创造更流畅的动画 */
		animation: gradientAnimation 5s linear infinite;
		/* 使用linear，确保动画流畅 */
	}

	@keyframes gradientAnimation {
		0% {
			background-position: 0% 50%;
		}
		/* 从左侧开始 */
		25% {
			background-position: 50% 50%;
		}
		/* 中间过渡 */
		50% {
			background-position: 100% 50%;
		}
		/* 到达右侧 */
		75% {
			background-position: 50% 50%;
		}
		/* 回到中间 */
		100% {
			background-position: 0% 50%;
		}
		/* 回到起始位置，完成循环 */
	}

	/* 头部 */
	.header {
		width: 100%;
		height: 150px;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/* 顶部右边按钮 */
	.icon {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		gap: 15px;
	}

	/* 头像部分 */
	.user {
		display: flex;
		gap: 15px;
		margin-top: 50px;
	}

	.user .content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* 查看详情按钮 */
	:deep(.wd-button__text) {
		font-size: 15px;
	}

	/* cell-group样式 */
	.wd-cell-group {
		margin: 10px;
		padding: 5px;
		border-radius: 10px;
	}

	/* cell图标 */
	.cell-icon {
		margin-right: 10px;
	}

	/* 退出登录按钮 */
	.out-button {
		margin-top: 20px;
		width: 80vw;
		color: rgba(180, 0, 0, 0.8);
		display: flex;
		justify-content: center;
	}

	/* 单元格 */
	:deep(.wd-cell__wrapper) {
		height: 40px;
		border-radius: 50px;
		display: flex;
		align-items: center;
	}

	/* 右边箭头 */
	:deep(.wd-cell__arrow-right) {
		color: #000 !important;
	}
</style>
